<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      * {
        margin: 0;
        padding: 0;
      }

      #slider {
        margin-top: 20px;
        width: 530px;
        appearance: none;
        height: 20px;
        border-radius: 8px;
        outline: none;
        background: none;
      }
      #slider::-webkit-slider-runnable-track {
        appearance: none;
        -webkit-appearance: none;
        width: 100%;
        height: 20px;
        background-color: #fff;
        border-radius: 10px;
        box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.15);
        cursor: pointer;
      }
      #slider::-webkit-slider-thumb {
        position: relative;
        top: -5px;
        appearance: none;
        -webkit-appearance: none;
        width: 30px;
        height: 30px;
        background-color: white;
        border: 4px solid #49a3fe;
        border-radius: 50%;
      }
      .box {
        display: flex;
        align-items: center;
        flex-direction: column;
        margin: 0 auto;
        width: 600px;
        height: 400px;
        background-color: rgb(233, 254, 254);
      }
      .box2 {
        display: flex;
        align-items: center;
        flex-direction: column;
        margin: 0 auto;
        width: 600px;
        height: 300px;
        background: linear-gradient(200deg, #8d77ca, #eaafc8);
      }
      h3 {
        font-size: 30px;
        margin-top: 100px;
      }
      .btn {
        position: relative;
      }
      .btn1 {
        border-radius: 8px;
        margin-top: 20px;
        width: 530px;
        height: 20px;
        background-color: #49a3fe;
      }
      .btn2 {
        position: absolute;
        top: 0px;
        border-radius: 8px;
        margin-top: 20px;
        width: 530px;
        height: 20px;
        background-color: #004182;
      }
      .circle {
        position: absolute;
        top: 10px;
        left: 20px;
        width: 35px;
        height: 35px;
        background-color: white;
        border: 3px solid #49a3fe;
        border-radius: 50%;
        cursor: pointer;
      }
      .box2 input {
        background-color: #004182;
      }
    </style>
  </head>
  <body>
    <!-- 1--click -->
    <div class="box">
      <h3>分数：<i class="number">20</i></h3>
      <div class="btn">
        <div class="btn1"></div>
        <div class="btn2"></div>
        <div class="circle"></div>
      </div>
    </div>
    <!-- 2--input -->
    <div class="box2">
      <h3>分数：<i class="number">80</i></h3>
      <input type="range" id="slider" value="80" />
    </div>
  </body>
  <script>
    //1--click
    const btn = document.querySelector('.btn')
    const circle = document.querySelector('.circle')
    let number = document.querySelector('.number')
    let btn2 = document.querySelector('.btn2')
    btn.addEventListener('click', function (e) {
      let x = e.pageX - this.offsetLeft
      console.log(e.pageX)
      btn2.style.width = x + 'px'
      x > 530 ? (x = 530) : x
      x < 0 ? (x = 0) : x
      circle.style.left = x - 14 + 'px'
      let textnumber = parseInt((x / 530) * 100)
      number.innerHTML = textnumber
    })
    //2--input
    const slider = document.querySelector('#slider')
    const box2 = document.querySelector('.box2').querySelector('.number')
    slider.addEventListener('input', function () {
      box2.innerHTML = slider.value
    })
  </script>
</html>
